<template>
  <div class="n-search">
    <div class="search__input-wrap ">
        <i class="iconfont iconfont-sousuo"  @click="changeInput"></i>
        <input type="search" class="search__input" @keyup="onKeyUp($event)" ref="input"  :value="value" @input="updateValue($event.target.value)" :placeholder="placeholder">
    </div>
    <div class="change-class" v-if="changeShow">
         <span class="change-icon iconfont   float-right" :class="{'iconfont-tupianliebiaoqiehuan':!classChange,'iconfont-liebiao':classChange}" @click="iconChange($event)"></span>
    </div>
    <div class="sousuo" v-show="sousuo" @click="changeInput">
        搜索
    </div>
  </div>
</template>

<script>

export default {
    props:{
        placeholder:{
            type:String,
            default:'请输入内容'
          },
        value:{
            default:''
        },
        sousuo:{
            default:false
        },
        changeShow:{
            default:false
        }
        
    },
    data(){
        return {
            classChange:this.$store.state.homepage.classChange,
        }
    },
    methods:{
        updateValue (value){
            var formattedValue = value
            // 如果值尚不合规，则手动覆盖为合规的值
            if (formattedValue !== value) {
              this.$refs.input.value = formattedValue
            }
            // 通过 input 事件带出数值
            this.$emit('input', formattedValue)
        },
        //点击搜索
        changeInput (){
            this.$emit('change');
        },
        onKeyUp (e){
            let vm=this;
            if(e.keyCode==13){
                vm.$emit('change');
            }
            // this.$refs.input.value=this.$refs.input.value.replace(/^\s+|\s+$/g,'');
        },
        //列表切换样式
        iconChange(e){
            e.stopPropagation();
            this.classChange=!this.classChange;
            this.$store.state.homepage.classChange=this.classChange;
            this.$emit('iconChange',this.classChange);
        },
    }
  
}
</script>


<style  lang="scss">
.n-search{
    background-color:transparent;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: .106667rem .4rem;
    .search__input-wrap {
        position: relative;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        height: .906667rem;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: .133333rem .64rem .133333rem .933333rem;
        border: .013333rem solid #ececec;
        border-radius: .6rem;
        background: rgba(253,254,253,.7);
        .iconfont-sousuo{
            color: #e4393c;
            position: absolute;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            left: .266667rem;
            font-size: .48rem;
            display: inline-block;
            text-rendering: auto;
            font-weight:bold;
        }
        .search__input {
            display: block;
            width: 100%;
            height: .613333rem;
            line-height: .613333rem;
            padding: 0;
            font-size: .373333rem;
            color: #666;
            border: none;
        }
    }
    .change-class{
        margin-left:.266667rem;
        .change-icon{
            font-size:.6rem;
            margin-top:- .08rem;
            color:#fff;
        }  
    }
    .sousuo{
        margin-left:.266667rem;
        line-height: .906667rem;
        font-size: .426667rem;
        letter-spacing: .026667rem;
        color:#e4393c;
        background: rgba(253,254,253,.7);
        padding: 0 10px;
        border:.013333rem solid #ececec;
        border-radius: .533333rem;
    }
}
input[type="search"] {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    background: rgba(253,254,253,.5);
    background-color:transparent;
    -webkit-rtl-ordering: logical;
    cursor: text;
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 0em;
    font: 400 13.3333px Arial;
}
</style>
